<template>
  <el-dialog
    title="修改关系链"
    :visible.sync="visible"
    :before-close="handleClose"
    width="40%"
  >
    <el-form ref="form" :model="form">
      <el-form-item>
        <el-radio-group v-model="form.type" @change="getList">
          <el-radio :label="1"
            >重新选择上级&nbsp;&nbsp;
            <el-select
              v-if="form.type === 1"
              v-model="form.flag"
              placeholder="请选择"
              size="small"
              style="margin-right:10px;"
              @change="radioTags"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-radio>
          <el-radio :label="2">解绑下级</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="form.type === 1 || (val.type !== 'all' && form.type === 2)"
        label="筛选条件"
      >
        <el-input
          v-model="form.searchName"
          placeholder="请输入名称"
          size="medium"
          style="width: 70%;"
        >
          <el-select
            slot="prepend"
            v-model="form.select"
            style=" width: 126px;"
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionsTwo"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="getList"
          ></el-button>
        </el-input>
      </el-form-item>
      <el-form-item
        v-if="form.type === 1 || (val.type !== 'all' && form.type === 2)"
      >
        <Table :data="listData" :max-height="360">
          <el-table-column align="center" width="55">
            <template slot-scope="scope">
              <el-radio
                v-model="scope.row.radio"
                :label="1"
                @change="radioTag(scope.row.member_id)"
              >
                <span style="display:none">dsd</span>
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column
            label="分销员名称"
            align="center"
            property="nick_name"
          ></el-table-column>
          <el-table-column
            label="等级"
            align="center"
            property="phone"
          ></el-table-column>
        </Table>
        <el-pagination
          style="text-align: center;margin-top: 10px;"
          :page-size="10"
          layout="prev, pager, next"
          :total="totals"
          @current-change="changes"
        >
        </el-pagination>
      </el-form-item>
    </el-form>

    <span slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSumbit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  EDITDISTRIBUTECHAIN,
  DISTRIBUTORAVALIABLELIST,
  BATCHEDITDISTRIBUTECHAIN,
  DISTRIBUTEDOWNLV
} from "../../../service";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    val: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      listData: [],
      pages: 1,
      totals: 0,
      form: {
        type: 1,
        flag: "user",
        select: 0,
        searchName: ""
      },
      options: [
        { name: "绑定其他分销员", value: "user" },
        { name: "绑定内部员工", value: "staff" }
      ],
      optionsTwo: [
        { label: "分销员昵称", value: 0 },
        { label: "分销员手机号", value: 1 }
      ]
    };
  },
  watch: {
    visible(v) {
      if (v) {
        this.form.type = 1;
        this.getList();
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit("outDialog");
    },
    async handleSumbit() {
      let json = this.listData.filter(ele => {
        return ele.radio === 1;
      });
      if (this.val.type === "all") {
        await BATCHEDITDISTRIBUTECHAIN({
          type: this.form.type,
          member_ids: this.val.member_ids,
          distributor: json[0].member_id
        }).then(({ code, msg }) => {
          if (code === 200) {
            this.$emit("outDialog", true);
          }
          this.$message({
            message: msg,
            type: code === 200 ? "success" : "error"
          });
        });
      } else {
        await EDITDISTRIBUTECHAIN({
          type: this.form.type,
          member_id: this.val.member_ids,
          distributor: json[0].member_id
        }).then(({ code, msg }) => {
          if (code === 200) {
            this.$emit("outDialog", true);
          }
          this.$message({
            message: msg,
            type: code === 200 ? "success" : "error"
          });
        });
      }
    },
    changes(page) {
      this.pages = page;
      this.getList();
    },
    radioTags() {
      this.page = 1;
      this.getList();
    },
    async getList() {
      let param = {
        page: this.pages,
        pageshow: 10,
        flag: this.form.flag
      };
      if (this.form.select === 0) {
        param.nick_name = this.form.searchName;
      } else {
        param.phone = this.form.searchName;
      }
      if (this.form.type === 1) {
        param.member_ids = this.val.member_ids;
        await DISTRIBUTORAVALIABLELIST(param).then(({ code, data, msg }) => {
          if (code === 200) {
            this.totals = data.count;
            data.list.forEach(ele => {
              ele.radio = 2;
            });
            this.listData = data.list;
          } else {
            this.totals = 0;
            this.listData = [];
            this.$message.error(msg);
          }
        });
      } else {
        param.member_id = this.val.member_ids;
        await DISTRIBUTEDOWNLV(param).then(({ code, data, msg }) => {
          if (code === 200) {
            this.totals = data.count;
            data.list.forEach(ele => {
              ele.radio = 2;
            });
            this.listData = data.list;
          } else {
            this.totals = 0;
            this.listData = [];
            this.$message.error(msg);
          }
        });
      }
    },
    radioTag(id) {
      this.listData.forEach(ele => {
        if (ele.member_id === id) {
          ele.radio = 1;
        } else {
          ele.radio = 2;
        }
      });
    }
  }
};
</script>
